import React, { Component } from 'react'
import "../../asset/css/uncenter.css"
import png_04 from "../../asset/imgs/pic/04.png"
import payment from "../../asset/imgs/icon/payment.png"
import delivery from "../../asset/imgs/icon/delivery.png"
import evaluation from "../../asset/imgs/icon/evaluation.png"
import service from "../../asset/imgs/icon/service.png"
import Header from "./component/DefaultHeader"
import { userinfo } from '../../utils/getUserInfo'
import { Carousel } from 'antd';
import {connect} from 'react-redux'
import {selectActionAsync} from "../../store/actionCreater"
import {bannerRequest} from "../../request/coupon_request"
class Uncenter extends Component {
    state = {
        number: 0,
        banner_list: []
    }
    UNSAFE_componentWillMount() {
        
        bannerRequest().then(res=>{
            this.setState({banner_list: res.list})
        })
        this.props.getCouponAsync()
        setTimeout(()=>{
            var number = 0
            this.props.couponList.forEach(element => {
                    element.content.forEach(item=>{
                        number++
                    }
                )
            });
            this.setState({number})
        },100)
        
    }
    logout(){
        localStorage.removeItem("login_data")
        this.props.restCarList()
        this.props.history.push("/login")
    }
    render() {
        const { number,banner_list } = this.state
        const contentStyle = {
            width: '100%'
          };
        return (
            <div className="ucenter-container">
            <Header title="会员中心" right_text="退出" right_method={()=>this.logout()}/>
            <div className="top">
                <div className="header">
                    <div className="avatar">
                        <img src={png_04} alt="" />
                    </div>
                    <div className="info">
                        <h3>{userinfo().nickname}</h3>
                    </div>
                    <div className="tag">每日签到</div>
                </div>
                <ul className="info-list">
                    <li>
                        <h3>12</h3>
                        <p>我的收藏</p>
                    </li>
                    <li>
                        <h3>12</h3>
                        <p>浏览记录</p>
                    </li>
                    <li>
                        <h3>&yen;12</h3>
                        <p>我的红包</p>
                    </li>
                    <li onClick={()=>this.props.history.push("/coupon")}>
                        <h3>{number}</h3>
                        <p>优惠券</p>
                    </li>
                </ul>
                <div className="order-info">
                    <div className="title">
                        <h3>我的订单</h3>
                        <span>全部订单 &gt; </span>
                    </div>
                    <ul>
                        <li>
                            <img src={payment} alt="" />
                            <p>待付款</p>
                        </li>
                        <li>
                            <img src={delivery} alt="" />
                            <p>待收货</p>
                        </li>
                        <li>
                            <img src={evaluation} alt="" />
                            <p>评价</p>

                        </li>
                        <li>
                            <img src={service} alt="" />
                            <p>售后/退款</p>
                        </li>
                    </ul>
                </div>
            </div>

            <div className="banner">
                <Carousel autoplay>
                    {
                        banner_list.map(item=>(
                            <div key={item.id}>
                                <img style={contentStyle} src={this.$adress+item.img} />
                            </div>
                        ))
                    }
                    
                </Carousel>
            </div>

            <ul className="section">
                <li>地址管理</li>
                <li>我的钱包</li>
                <li>我的二维码</li>
                <li>我的小伙伴</li>
                <li>0元试用</li>
            </ul>
        </div>
    )
}
}
const mapState=(state)=>{
    return {
        couponList: state
    }
}

const mapDispath=(dispatch)=>{
    return {
        getCouponAsync: ()=>dispatch(selectActionAsync())
    }
}
export default(connect(mapState,mapDispath)(Uncenter)) 